<template>
    <div class="study-record-wrap">
      <div class="study-record-list padding-12">
        <van-list
          v-model="isUploading"
          :finished="isUpfinished"
          :finished-text=" studyRecordList.length === 0 ? '暂无学习记录' : '没有更多了' "
          @load="onLoad"
        >
          <van-row gutter="12">
            <van-col span="12" v-for="(item,index) in studyRecordList" :key="index" class="index-list">
              <router-link :to="{path:baseUrl,query:{id:item.id}}">
                <div class="user-study-record">
                  <div class="user-study-record-img border-radius5">
                    <img :src="CDNimgUrl + item.course_image">
                    <p class="text-align-c">
                      <template>
                        <span v-if="item.course_count <= 1">{{item.section_timer}}</span>
                        <span class="text-align-c" v-else>共{{item.course_count}}集</span>
                      </template>
                    </p>
                    <label class=""></label>
                  </div>
                  <div class="mime-video-list-content">
                    <h4 class="mime-video-list-content-title">{{item.course_title}}</h4>
                    <template>
                      <p v-if="item.course_count <= 1">
                        <span>已观看{{item.study_at}}</span>
                      </p>
                      <p v-else>
                        <span>{{sectionTitle}}</span>
                        <span>已观看{{item.study_at}}</span>
                      </p>
                    </template>
                  </div>
                </div>
              </router-link>
            </van-col>
          </van-row>
        </van-list>
      </div>
    </div>
</template>

<script>
  import ajax from '../../module/ajax/public'
  import FooterNav from '@/components/FooterNav'
  import { List, Row, Col,Tab, Tabs } from 'vant'

    export default {
      name: "StudyRecord",
      components:{
        FooterNav,
        [List.name]: List,
        [Row.name]: Row,
        [Col.name]: Col,
        [Tab.name]: Tab,
        [Tabs.name]: Tabs,
      },
      mounted(){
        this.getStudyRecordData();
      },
      data(){
          return{
            tabActive:0,
            page:0,
            baseUrl:'/mime-video-detail',
            CDNimgUrl: this.GLOBAL.CDNimgUrl,
            studyRecordList:[],
            isUploading: false,
            isUpfinished:false,
            sectionTitle:'',
          }
      },
      methods:{
        getStudyRecordData(){
          this.page++;
          ajax.doAction({
            url: `/study-history?page=${this.page}`,
            type: 'POST',
            successCallback:(data)=>{
              // console.log(data);
              let datas = data.data;
              datas.forEach((value)=>{
                // console.log(value.section_id)
                let join = value.section_id.split('-');
                // console.log(join);
                this.sectionTitle = `第${join[0]}章-第${join[1]}节 `;
              });
              this.isUploading = false;
              if(datas.length >0){
                this.studyRecordList = this.studyRecordList.concat(datas);
              }else{
                this.isUpfinished = true;
              }
            },
            errorCallback: (data)=> {
              console.log('请求失败');
            }
          });
        },
        onLoad(){
          // console.log('上拉加载'+this.page);
          this.getStudyRecordData();
        }
      }
    }
</script>

<style scoped>
.study-record-list{
  padding-bottom: 55px;
}
</style>
